/**
 * Created by jijin on 2017/7/22.
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Linking,
  TouchableOpacity,
  BackAndroid,
  Platform
} from 'react-native';
import Ionicon from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import HardwareBackPress from '../utils/handle-back-btn-press';
import NavBar from '../components/navbar';
import {AppColors, AppSizes, AppFonts} from '../style';

export default class About extends Component {

  componentDidMount() {
    BackAndroid.addEventListener('hardwareBackPress', HardwareBackPress.bind(this));
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress', HardwareBackPress.bind(this));
  }

  openSocial(url) {
    Linking.openURL(url)
      .catch(err => {alert('An error occurred: ', err)});
  }

  render() {
    let {userInfo} = this.props;

    return (
      <View style={styles.container}>
        <View style={[styles.container, styles.userContent]}>
          <Image style={styles.userGravator}
                 source={userInfo ? {uri: userInfo.gravator} : require('../images/gravatar.jpg')}
          />
          <Text style={styles.userName}>{userInfo ? userInfo.name : 'Surmon'}</Text>
          <Text style={styles.userSlogan}>{userInfo ? userInfo.slogan : 'Talk is cheap. Show me the code.'}</Text>
          <View style={styles.userSocials}>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('https://github.com/surmon-china')}>
              <Ionicon name="logo-github" size={26} style={styles.userSocialIcon}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('https://stackoverflow.com/users/6222535/surmon?tab=profile')}>
              <FontAwesome name="stack-overflow" size={22} style={styles.userSocialIcon}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('https://weibo.com/nocower')}>
              <FontAwesome name="weibo" size={27} style={styles.userSocialIcon}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('https://www.facebook.com/surmon.me')}>
              <Ionicon name="logo-facebook" size={30} style={styles.userSocialIcon}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('https://twitter.com/surmon_me')}>
              <Ionicon name="logo-twitter" size={28} style={styles.userSocialIcon}/>
            </TouchableOpacity>
            <TouchableOpacity style={styles.userSocialItem} onPress={() => this.openSocial('http://www.linkedin.com/in/surmon-ma-713bb6a2')}>
              <Ionicon name="logo-linkedin" size={30} style={styles.userSocialIcon}/>
            </TouchableOpacity>
          </View>
        </View>
        <NavBar
          leftOn={true}
          title={this.props.title}
          onLeftPress={() => Platform.OS === 'android' && this.props.openMenu()}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.cardBackground
  },
  userContent: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  userGravator: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: AppColors.textPrimary
  },
  userName: {
    ...AppFonts.h1,
    color: AppColors.textSecondary,
    marginTop: AppSizes.padding,
    marginBottom: AppSizes.padding / 2,
  },
  userSlogan: {
    ...AppFonts.base,
    color: AppColors.textTitle,
    marginBottom: AppSizes.padding
  },
  userSocials: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 10,
  },
  userSocialItem: {
    marginLeft: 10,
    marginRight: 10
  },
  userSocialIcon: {
    color: AppColors.textDefault
  }
});